<template>
  <div>
    <div class="page-title" style="width:100%">按问题严重程度分析</div>
    <div class="page-content">
        <el-row>
          <el-form :model="filterQuery">
            <el-col :span="6">
              <el-form-item>
                <treeselect
                v-model="filterQuery.companyCode"
                :multiline="false"
                :options="company"
                placeholder="搜索受检单位"
                filterable
                clearable
                style="width:80%">
                </treeselect>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-date-picker
                type="date"
                v-model="filterQuery.startDate"
                placeholder="开始日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 140px">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item
              label="至"
              label-width="100%">
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-date-picker
              type="date"
              v-model="filterQuery.endDate"
              placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width: 140px">
              </el-date-picker>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select
                v-model="filterQuery.round"
                placeholder="搜索轮次"
                filterable
                clearable
                style="width: 120px">
                <el-option
                v-for="item in round"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 80px" @click="getSeverityProblem">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="width: 120px" @click="exportTable">导出Excel</el-button>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-table
          :data="problem"
          border
          class="table"
          @selection-change="handleSelectionChange"
          >
            <el-table-column
            label="序号"
            type="index"
            header-align="center"
            width="60%"
            >
            </el-table-column>
            <el-table-column
            label="问题严重程度"
            prop="problemName"
            header-align="center">
            </el-table-column>
            <el-table-column
            label="问题数量（项）"
            prop="problemNum"
            header-align="center">
            </el-table-column>
            <el-table-column
            label="百分比（%）"
            prop="percentage"
            header-align="center">
            </el-table-column>
            <el-table-column
            type="selection">
            </el-table-column>
          </el-table>
          </el-row>
          <el-row style="height: 20px">
          </el-row>
          <el-row>
            <el-col :span="8">
              <div id="pieChart" style="width: 100%; height: 400px"></div>
            </el-col>
            <el-col :span="12">
              <div id="histogram" style="width: 100%; height: 400px;"></div>
            </el-col>
          </el-row>
    </div>
  </div>
</template>

<script>
import { GetCheckRound,
         GetSeverityProblem } from '../../../services/problemSeverityAnalysis'
import {GetCompany} from '../../../services/gettreedata'
// import Highcharts from 'highcharts'
import { Pie,
         Histogram } from '../Charts'
import { compare,
         SelectionChange } from '../Function'
// import echarts from 'echarts'

// const DefaultQueryExcel = {
//   companyCode: '01',
//   startDate: '',
//   endDate: '',
//   round: '',
//   fieldName: 'ProblemRank',
//   fieldCode: '0030'
// }

export default {
  data() {
    return{
      filterQuery: {
        companyCode: '01',
        startDate: '',
        endDate: '',
        round: '',
        fieldName: 'ProblemRank',
        fieldCode: '0030'
      },
      company: [],
      round:[],
      problem:[],
      filterQueryExcel: {},
      excel: [],
      excelData: [],
      // pieCharts: '',
      // charts: '',
      seriesData: {},
      legendData: [],
      unSelectData: [],
      pieData: [],
      levelData: []
    }
  },
  mounted(){
    this.getCompany();
    this.getRound();
    this.getSeverityProblem();
    this.drawPie();
    this.drawHistogram();
  },
  methods: {
    getCompany() {
      GetCompany().then((res) => {
        this.company = res.data
        this.getSeverityProblem()
      })
    },
    getRound() {
      GetCheckRound().then((res) => {
        this.round = res.data
      })
    },
    handleSelectionChange(row) {
      this.unSelectData = SelectionChange(row,this.levelData)
    },
    getSeverityProblem() {
      GetSeverityProblem(this.filterQuery).then((res) => {
        this.chartData = res.data
        this.seriesData = res.data.岗位统计
        var j = 0
        for(var i in this.chartData.数量统计) {
          this.problem[j] = i
          j++
        }
        this.levelData = this.problem
        this.problem = this.problem.map(item => {
          return {
            problemName: item,
            problemNum: this.chartData.数量统计[item],
            percentage: this.chartData.百分比统计[item],
          }
        })
        this.problem.sort(compare)
        var positionNum = 0
        res.data.岗位统计.map(item => {
          for(var positionName in item){
            this.legendData[positionNum] = positionName
          }
          positionNum++
        })
        this.pieData = this.problem.map(item => {
          return {
            y: item.problemNum,
            name: item.problemName,
          }
        })
        this.pieData.map(item => {
          if(this.unSelectData.length !== 0) {
            this.unSelectData.map(select => {
              if(item.name == select) {
                item.name = ''
                item.y = 0
              }
            })
          }
        })
        this.seriesData = this.legendData.map(item => {
          return {
            name: item,
            data: [],
          }
        })
        var num = 0
        res.data.岗位统计.map(item => {
          for(var position in item) {
            var dataNum = 0
            for(var data in item[position]) {
              if(this.unSelectData.length !== 0) {
                this.unSelectData.map(unSelectData => {
                  item[position][unSelectData] = 0
                })
                this.seriesData[num].data[dataNum] = item[position][data]
                dataNum++
              }
              else{
                this.seriesData[num].data[dataNum] = item[position][data]
                dataNum++
              }
            }
            num++
          }
        })
        this.drawPie();
        this.drawHistogram();
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    exportTable() {
      this.excelData = GetSeverityProblem(this.filterQueryExcel).then((data) => {
        this.excel = data.data
        this.excelData = this.problem
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
          const tHeader = ['问题程度','问题个数（项）','百分比'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ['problemName','problemNum','percentage'];
          const list = this.excelData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '问题程度excel');
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    drawPie() {
      Pie('pieChart', '问题严重程度', this.pieData)
      // echarts
      // this.pieCharts = echarts.init(document.getElementById('pieChart'))
      // this.pieCharts.setOption({
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b} : {c} ({d}%)'
      //   },
      //   legend: {
      //     bottom: 10,
      //     left: 'center',
      //     data: this.levelData
      //   },
      //   series: [{
      //     name: '问题严重程度分析',
      //     type: 'pie',
      //     radius: '75%',
      //     center: ['50%', '50%'],
      //     stillShowZeroSum: false,
      //     data: this.pieData,
      //     emphasis: {
      //       itemStyle: {
      //         shadowBlur: 10,
      //         shadowOffsetX: 0,
      //         shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       }
      //   }]  
      // })
    },
    drawHistogram() {
      Histogram('histogram', this.levelData, this.seriesData)
      // this.charts = echarts.init(document.getElementById('histogram'))
      // this.charts.setOption({
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow' 
      //     }
      //   },
      //   toolbox: {
      //     feature: {
      //       dataView: {show: true, readOnly: false},
      //       magicType: {show: true, type: ['line', 'bar']},
      //       restore: {show: true},
      //       saveAsImage: {show: true}
      //     }
      //   },
      //   legend: {
      //     bottom: 5,
      //     data: this.legendData,
      //     itemWidth: 18,
      //     itemHeight: 12
      //   },
      //   grid: {
      //   left: '5%',
      //   right: '4%',
      //   bottom: '20%',
      //   containLabel: true
      //   },
      //   xAxis: [{
      //     type: 'category',
      //     data: this.levelData,
      //   }],
      //   yAxis: [{
      //     type: 'value',
      //     name: '问题个数',
      //     min: 0,
      //     max: 15,
      //     interval: 1,
      //   }],
      //   series: this.statisticsData
      // })
    },
  },
}
</script>

<style>
.table {
  width: 70%;
  margin: auto;
  text-align: center;
}
th.gutter {
  display: table-cell!important;
}
</style>